/**
 * Created by Administrator on 2017/3/31.
 */
import React,{Component} from 'react'
import {
StyleSheet,
    Text,
    View,
    Image,
TextInput,
    TouchableOpacity
} from 'react-native'
//获取屏幕的宽度
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
class LoginView extends Component{
    render (){
        return <View style={styles.contains}>
            <Image source={require('./images/icon.png') } style={styles.iconStyle} />
            <View style={styles.inputWrapStyle} >
                <TextInput placeholder="输入qq号码" style={styles.inputStyle} ></TextInput>
            </View>
            <View style={styles.inputWrapStyle} >
                 <TextInput placeholder="输入密码" style={styles.inputStyle}  keyboardType="numeric" secureTextEntry={true} ></TextInput>
            </View>

            <TouchableOpacity
            activeOpacity={0.5}>
            <View  style={styles.loginWrapperStyle}>
                <Text style={{flex:1, color:'#aaaaaa', textAlign:'center'}} >登录</Text>
            </View>
            </TouchableOpacity>

        </View>
    }
}

var styles = StyleSheet.create({
    contains:{
        flexDirection:'column',
        backgroundColor:'#aa0000',
        alignItems:'center',
        // flexWrap:'wrap'
    },
    iconStyle:{
        width:80,
        height:80,
        borderRadius:40,
        // alignSelf:'center',
        borderWidth:2,
        borderColor:'#fff'
    },
    inputStyle:{
        flex:1 ,//填满父容器
        marginLeft:10,
        marginRight:10,
        textAlign:'center'
    },
    inputWrapStyle:{
        flexDirection:'row',
    },
    loginWrapperStyle:{
        flexDirection:'row',
        marginTop:20,
        backgroundColor:'#87cefa',
        marginLeft:10,
        marginRight:10,
        height:30,
        borderRadius:6,
        justifyContent:'center',
        alignItems:'center',
        // width:ScreenWidth - 30
        width:200

    }
});

module.exports = LoginView;